<template>
  <div class="homePage">
    <top-operation :title="title"></top-operation>
    <base-scroll class="baseModel">
      <el-row class="radioRow">
        <el-radio-group v-model="ruleForm.FPubType" @change="userChange(ruleForm.FPubType)">
          <el-radio-button label="1">出租</el-radio-button>
          <el-radio-button label="2">出售</el-radio-button>
        </el-radio-group>
      </el-row>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" :label-position="labelPosition" label-width="80px" class="releaseForm">
        <el-row>
          <el-form-item label="小区名称" prop="FName">
            <el-input v-model="ruleForm.FName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>

        <el-row :inline="true">
          <el-form-item label="面积" prop="FArea" class="halfwidth">
            <el-input v-model="ruleForm.FArea" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="FPrice" class="halfwidth">
            <el-input v-model="ruleForm.FPrice" placeholder="万元/年"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="楼层" class="halfwidth">
            <el-input v-model="ruleForm.FStorey" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="装修" class="halfwidth">
            <el-select ref="selectType" v-model="ruleForm.FFitment" placeholder="请选择类型" @change="test">
              <el-option
                v-for="item in selectoption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注">
            <el-input v-model="ruleForm.FRemark" type="textarea" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="FLinkTel">
            <el-input v-model="ruleForm.FLinkTel" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <el-form-item label="置顶发布">
          <el-switch v-model="IsVIP" disabled style="width: 30px"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认发布</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </base-scroll>
  </div>
</template>

<script>
import topOperation from '@/common/topOperation/topTitle.vue'
import baseScroll from '@/common/scroller/baseScroll.vue'

export default {
  components: {
    baseScroll,
    topOperation
  },
  data() {
    var validateNewphone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else {
        const reg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    return {
      title: '精确发布',
      labelPosition: 'right',
      ruleForm: {
        FID: '',
        FPubType: 1, // 发布类型必填
        FName: '', // 小区名称必填
        FArea: '', // 面积必填
        FPrice: '', // 价格必填
        FStorey: '', // 楼层
        Fitment: '', // 装修
        FRemark: '', // 备注
        FLinkTel: '', // 联系电话必填
        FIsTop: '' // 是否为vip
      },
      selectoption: [{
        value: 1,
        label: '毛坯'
      }, {
        value: 2,
        label: '简装'
      }, {
        value: 3,
        label: '中装'
      }, {
        value: 4,
        label: '精装'
      }, {
        value: 5,
        label: '豪装'
      }, {
        value: 6,
        label: '新装'
      }, {
        value: 7,
        label: '老装'
      }],
      value: '',
      rules: {
        FName: [
          { required: true, message: '请输入小区名称', trigger: 'blur' }
        ],
        FArea: [
          { required: true, message: '请输入面积', trigger: 'blur' }
        ],
        FPrice: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ],
        FLinkTel: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: validateNewphone, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    hasQuery() {
      return (Object.keys(this.$route.query).length > 0) ? true : false
    },
    IsVIP() {
      if (this.hasQuery) {
        return (this.$route.query.IsVIP == 1) ? true : false
      } else {
        return (this.$store.state.userData.IsVIP == 1) ? true : false
      }
    },
    addinfoOrmodify() { // 判断进入修改接口或者是新增接口
      if (this.hasQuery) {
        return '/api/PrecisePub/MolPrecisePub'
      } else {
        return '/api/ChatRoom/AddPrecisePub'
      }
    }
  },
  mounted() {
    this.initRelease()
  },
  methods: {
    initRelease() {
      if (this.hasQuery) {
        this.ruleForm = this.$route.query
        // console.log(typeof this.$route.query.FFitment)
        // this.$nextTick(() => {
        //   this.value = this.$route.query.Fitment
        // })
      } else {
        this.ruleForm.FIsTop = this.$store.state.userData.IsVIP
        this.ruleForm.FLinkTel = this.$store.state.userData.FMobile
      }
    },
    userChange(val) {
      // console.log(this.ruleForm.type)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post(this.addinfoOrmodify, this.ruleForm)
            .then((response) => {
              const res = response.data
              if (res.code == 1) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$router.go(-1)// 返回上一层
              } else {
                this.$message.error('登录失败')
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    test(val) {
      console.log(val)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.releaseForm {
  margin: 0.5rem;
}
.fullwidth {
  width: 100%;
}
.halfwidth {
  display: inline-block;
  width: 50%;
  float: left;
}
</style>
<style>
.el-form-item {
  margin-bottom: 0.5rem;
}
.releaseForm .el-textarea__inner, .releaseForm .el-input__inner {
  border: none;
  border-bottom: 1px solid #d5dae6;/*no*/
  resize:none;
}
</style>
